<template>
  <div>
    <van-form @submit="onSubmit">
      <van-divider content-position="left">收/寄件人信息</van-divider>
      <van-field v-model="form.name" name="收件人姓名" label="收件人姓名" placeholder="收件人姓名"
        :rules="[{ required: true, message: '请填写收件人姓名' }]"/>
      <van-field v-model="form.phone" type="tel" name="收件人手机号码" label="收件人手机号码" placeholder="收件人手机号码"
        :rules="[{ required: true, message: '请填写收件人手机号码' }]"/>
      <van-field v-model="form.address" type="" name="收件地址" label="收件地址" placeholder="收件地址"
        :rules="[{ required: true, message: '请填写收件地址' }]"/>
      <van-field v-model="form.phone" type="tel" name="收件邮编" label="收件邮编" placeholder="收件邮编"
        :rules="[{ required: true, message: '请填写收件邮编' }]"/>

      <van-field v-model="form.name" name="寄件人姓名" label="寄件人姓名" placeholder="寄件人姓名"
        :rules="[{ required: true, message: '请填写寄件人姓名' }]"/>
      <van-field v-model="form.phone" type="tel" name="寄件人手机号码" label="寄件人手机号码" placeholder="寄件人手机号码"
        :rules="[{ required: true, message: '请填写寄件人手机号码' }]"/>
      <van-field v-model="form.address" type="" name="寄件地址" label="寄件地址" placeholder="寄件地址"
        :rules="[{ required: true, message: '请填写寄件地址' }]"/>
      <van-field v-model="form.phone" type="tel" name="寄件邮编" label="寄件邮编" placeholder="寄件邮编"
        :rules="[{ required: true, message: '请填写寄件邮编' }]"/>

        
      <van-divider content-position="left">托寄物信息</van-divider>
      <van-field v-model="form.name" name="物品名称" label="物品名称" placeholder="物品名称"
        :rules="[{ required: true, message: '请填写物品名称' }]"/>
      <van-field v-model="form.name" name="物品材质" label="物品材质" placeholder="物品材质"
        :rules="[{ required: true, message: '请填写物品材质' }]"/>
      <van-field v-model="form.name" name="物品用途" label="物品用途" placeholder="物品用途"
        :rules="[{ required: true, message: '请填写物品用途' }]"/>
      <van-field :value="form.returnTime" readonly clickable name="发件日期" label="发件日期" placeholder="发件日期"
        :rules="[{ required: true, message: '请填写发件日期' }]" @click="showTimePicker = true" />
        <van-popup v-model="showTimePicker" position="bottom">
          <van-datetime-picker
            type="date"
            @confirm="onConfirm"
            @cancel="showTimePicker = false"
          />
        </van-popup>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">提交</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getDict, getAreaList } from '@/api/index'
import { areaList } from '@vant/area-data';
export default {
  name: 'ReportInto',
  data() {
    return {
      form: {},
      showArea: false,
      showPicker: false,
      showDestinationArea: false,
      showOccupation: false,
      showTimePicker: false,
      areaList,
      localAreaList: [],
      occupationLists: [],
      vehicleList: []
    }
  },
  mounted() {
    getDict('occupation_dict').then(res => {
      this.occupationLists = res.data
    })
    getDict('vehicle_dict').then(res => {
      this.vehicleList = res.data
    })
    this.getAreaList()
  },
  methods: {
    getAreaList(parentCode = '3708') {
      getAreaList({
        useLocale: true,
        parentCode
      }).then(res => {
        this.localAreaList = res.data
      })
    },
    onSubmit(values) {
      console.log('submit', values);
    },
    onConfirm(values) {
      console.log(values)
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
    //  onConfirm(value) {
    //   this.value = value;
    //   this.showPicker = false;
    // },
  },
}
</script>

<style>

</style>